<template>
  <view
    :style="{'background': bgColor, 'top' : topNavHeight + 'px'}"
    :class="[fixedFlag ? 'content' : '', borderBom ? 'borderBom' : '']"
  >
    <u-tabs
      :list="curListData"
      :key-name="keyName"
      :bill-type="billType"
      :current="current"
      :line-width="lineColorObj.width"
      :line-height="lineColorObj.height"
      :line-color="lineColorObj.bgUrl"
      :active-style="curActiveStyle"
      :inactive-style="curInactiveStyle"
      :scrollable="scrollable"
      :item-style="`padding:0 30rpx;height:88rpx;${curListData.length <= 5 ? itemStyle : ''}`"
      @click="tabClick"
    />
  </view>
</template>

<script>
export default {
  name: 'Index',
  props: {
    current: {
      type: Number,
      default: 0
    },
    topNavHeight: {
      type: Number,
      default: 0
    },
    borderBom: {
      type: Boolean,
      default: false
    },
    scrollable: {
      type: Boolean,
      default: true
    },
    listData: {
      type: Array,
      default: null
    },
    keyName: {
      type: String,
      default: ''
    },
    billType: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    ceiling: {
      type: Boolean,
      default: false
    },
    lineColorObj: {
      type: Object,
      default: () => {
        return {
          bgUrl: `#FF6010`,
          width: '24',
          height: '2'
        }
      }
    },
    activeStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    inactiveStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      fixedFlag: false,
      itemStyle: '',
    }
  },
  computed: {
    curActiveStyle() {
      return Object.assign({
        color: '#FF6010',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      }, this.activeStyle)
    },
    curInactiveStyle() {
      return Object.assign({
        color: '#333',
        transform: 'scale(1)'
      }, this.inactiveStyle)
    },
    curListData() {
      return this.listData
    }
  },
  watch: {
    ceiling(newVal, oldVal) {
      if (newVal != oldVal) {
        this.fixedFlag = newVal
      }
    },
    listData(newVal, oldVal) {
      if (newVal != oldVal) {
        this.setTingWidth()
      }
    },
  },
  mounted() {
    this.fixedFlag = this.ceiling
    this.setTingWidth()
  },
  methods: {
    setTingWidth() {
      let itemWidth = 0
      if (this.curListData.length <= 5) {
        itemWidth = (this.vuex_systemInfo[1].windowWidth / this.curListData.length) - 30
      }
      this.itemStyle = `min-width: ${itemWidth}px;`
    },
    tabClick(val) {
      this.$emit('update:current', val.index)
      this.$emit('tabClick', val)
    }
  }
}
</script>

<style scoped>
.content {
  position: fixed;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0rpx 32rpx;
  z-index: 1;
}
.borderBom {
  border-bottom: 1rpx solid rgba(245,245,245,1);
  position: fixed;
  width: 100%;
  z-index: 9;
  box-sizing: border-box;
}
</style>
